/**
 * @description 风险分解
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { SecondHeaderC, TreeChartsC } from '../../../../comps';
import style from '../index.less';

class DecomposeRisk extends PureComponent {
  constructor() {
    super();
    this.state = {
      series: undefined, //图形数据
    };
  }
  componentDidMount() {
    const { args } = this.props;
    this.getRisk(args);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { dispatch, args, timeStamp } = nextProps;
    if (JSON.stringify(timeStamp) !== JSON.stringify(this.props.timeStamp)) {
      this.setState({
        series: undefined,
      });
      this.getRisk(args);
    }
  }
  getRisk = (args) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'riskAttributionM/getRisk',
      payload: args,
      callback: (data) => {
        this.setState({
          series: data || [],
        });
      },
    });
  };

  showCharts = () => {
    const { series } = this.state;
    return (
      <div style={{ height: '300px' }}>
        <TreeChartsC data={series} height={350} isPercent={true} />
      </div>
    );
  };

  render() {
    const { series } = this.state;
    return (
      <div style={{ marginTop: '10px' }} className={style.back_charts}>
        <SecondHeaderC title={`风险分解（对比基准为${series && series.length > 0 ? series[0].bench_id : ''}）`} />
        <div style={{ height: '340px' }} className='echarts2'>
          {this.showCharts()}
        </div>
      </div>
    );
  }
}
export default connect(({ riskAttributionM }) => ({
  riskAttributionM,
}))(DecomposeRisk);
